<template>
	<gui-page :customHeader="true" class="ksd-orderpage gui-bg-gray">
		<template v-slot:gHeader>
			<!-- #ifdef MP -->
			<view style="height:20px;"></view>
			<!-- #endif -->
		</template>
		<!-- 请开始您的开发 ~ -->
		<template v-slot:gBody>
			<view class="gui-bg-white gui-dark-bg-level-3 gui-padding ">
				<image src="/static/imgs/bg.jpg" style="width: 100%;height:200px"></image>
				<view class="mt5">
					<view class="fb fz16 gui-color-black3">来自福布斯精英的25节金融思维课</view>
					<view class="gui-flex gui-space-between gui-align-items-center ">
						<view class="fz12 gui-color-gray mt5">
							<text>永久可看</text>
							<text class="ml10 mr10">4100在学习</text>
						</view>
						<view class="gui-box-tags">
							<text class="tag icon-tag-dj">独家</text>
							<text class="tag icon-tag-lz">连载</text>
						</view>
					</view>
					<view class="mt5 gui-color-red">￥199</view>
				</view>
			</view>
			
			<view class="gui-bg-white gui-dark-bg-level-3 gui-padding mt10">
				<view class="fz16 fb mb10">支付方式</view>
				<gui-select-list 
				@change="change1" 
				:items="lists"></gui-select-list>
			</view>
			
			<view class="gui-bg-white gui-dark-bg-level-3 gui-padding mt10 fz12">
				<view class="gui-color-gray" @click="openXieyi">
					提交订单则表示您同意<text class="gui-color-black">《学习512用户服务协议》</text>和
					<text class="gui-color-black">《学习512售后政策》</text>等
				</view>
			</view>
			<cc-dialog-xieyi ref="dialogXieYiRef"></cc-dialog-xieyi>
			
			<view class="um-order-ux-order-v2-go-pay_wrap">
				<view class="um-order-ux-order-v2-go-pay_content f-cb">
					<view class="gui-flex gui-align-items-center">
						<view class="v2-go-pay_content_title fz13">实付金额：</view>
						<view class="v2-go-pay_content_price_account  ml3 fb">
							<text class="v2-go-pay_content_price_account_icon">¥</text>199.00
						</view>
					</view>
					<view class="um-order-ux-order-v2-go-pay_content_btn f-fr" @click="handlePay" style="touch-action: pan-y;">
						{{currentIndex==3?'立即兑换':'立即支付'}}
					</view>
				</view>
			</view>
			
			<gui-modal 
				:customClass="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']" 
				ref="guimodal1" 
				title="优惠码兑换">
					<template v-slot:content>
						<view class="gui-padding gui-bg-gray gui-dark-bg-level-2">
							<input auto-focus placeholder="请输入兑换码" class="gui-text-center"  />
						</view>
					</template>
					<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
					<template v-slot:btns>
						<view 
						class="gui-flex gui-row gui-space-between">
							<view 
							hover-class="gui-tap" 
							class="modal-btns gui-flex1" 
							style="margin-right:80rpx;">
								<text 
								class="modal-btns gui-color-gray" 
								@tap="close1">取消</text>
							</view>
							<view 
							hover-class="gui-tap" 
							class="modal-btns gui-flex1" 
							style="margin-left:80rpx;">
								<text 
								class="modal-btns gui-primary-color" 
								@tap="confirm1">兑换</text>
							</view>
						</view>
					</template>
				</gui-modal>
		</template>
	</gui-page>
</template>
<script>
// 模拟数据
var demoData = [
	{img:'/static/pay/alipay.png',title:"支付宝", checked:true},
	{img:'/static/pay/weixin.png',title:"微信", checked:false},
	{img:'/static/pay/huabei.png',title:"花呗分期", checked:false},
	{img:'/static/pay/code.png',title:"兑换码", checked:false}
];
export default {
	data() { 
		return {
			lists : [],
			dialogXieYiRef:null,
			currentIndex:0
		}
	},
	onLoad() {
		this.lists  = demoData;
	},
	methods: {
		change1 : function(e){
			this.currentIndex = e
			if(e==3){
				this.open1()
			}
		},
		handleBack(){
			uni.switchTab({url: "/pages/tabbar/me"})
		},
		handlePay(e){
			uni.navigateTo({
				url:"/pages/order/paysuccess"
			})
		},
		open1 : function () {
			this.$refs.guimodal1.open();
		},
		close1 : function () {
			this.$refs.guimodal1.close();
		},
		confirm1 : function () {
			// 客户点击确认按钮后的逻辑请在此处实现
			this.$refs.guimodal1.close();
		},
		openXieyi(){
			this.$refs.dialogXieYiRef.handleOpen()
		}

	}
}
</script>
<style scoped lang="scss">
	.um-order-ux-order-v2-go-pay_wrap {
		position: fixed;
		width: 100%;
		bottom: 0;
		background: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.um-order-ux-order-v2-go-pay_content {
	    padding: 10px 20px;
	    background: #fff;
	    box-sizing: border-box;
	    border-top: 1px solid rgba(221, 221, 221, 0.4);
	    width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.um-order-ux-order-v2-go-pay_content .v2-go-pay_content_title {
	}
	
	.um-order-ux-order-v2-go-pay_content .v2-go-pay_content_price_account {
	    color: #FF4400;
	}
	
	.um-order-ux-order-v2-go-pay_content .v2-go-pay_content_price_account_icon {
	}
	
	.um-order-ux-order-v2-go-pay_content_btn {
	    display: inline-block;
	    width: 172px;
	    height: 42px;
	    line-height: 42px;
	    background: #ff632A;
	    color: #fff;
	    border-radius: 42px;
	    text-align: center;
	}
	
	.gui-select-list-img{width: 24px!important;height: 24px!important;}
	.gui-box-tags{font-size:26rpx;
		.tag{border:1px solid #eee;border-radius: 6rpx;padding:6rpx 16rpx;margin-left: 5px;color:#666;}
	}
	.modal-btns{line-height:88rpx; font-size:26rpx; text-align:center; width:200rpx;}
</style>
